<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查询交易记录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        .form-group select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        .result-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .result-table th, .result-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        .result-table th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>查询交易记录</h2>
    <form action="/transaction" th:action="@{/transaction}" method="post">
        <div class="form-group">
            <label for="startDate">开始日期:</label>
            <input type="text" id="startDate" name="transactionDateA" th:value="${transactionDateA}">
        </div>
        <div class="form-group">
            <label for="endDate">结束日期:</label>
            <input type="text" id="endDate" name="transactionDateB" th:value="${transactionDateB}">
        </div>
        <button type="submit">查询</button>
    </form>
    <div id="resultArea">
        <h3>查询结果:</h3>
        <table class="result-table">
            <thead>
            <tr>
                <th>交易日期</th>
                <th>支出/收入</th>
                <th>账户余额</th>
                <th>交易类型</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="list:${page.data}">
                <td th:text="${list.transactionDate}"></td>
                <td th:text="${list.amount}"></td>
                <td th:text="${list.balance}"></td>
                <td th:text="${list.transactionType}"></td>
                <td th:text="${list.remark}"></td>
            </tr>
            </tbody>
        </table>
        <dev style="text-align: center">
            <a th:if="${page.pageNo gt 1}" th:href="'/transaction?pageIndex=' + 1">首页</a>
            <a th:if="${page.pageNo gt 1}" th:href="'/transaction?pageIndex=' + ${page.getPageNo() - 1}">上一页</a>
            <a th:unless="${page.pageNo gt 1}" href="javascript:alert('已经是首页')">首页</a>
            <a th:unless="${page.pageNo gt 1}" href="javascript:alert('已经是首页')">上一页</a>
            <a th:if="${page.pageNo lt page.totalPage}"
               th:href="'/transaction?pageIndex=' + ${page.getPageNo() + 1}">下一页</a>
            <a th:if="${page.pageNo lt page.totalPage}" th:href="'/transaction?pageIndex=' + ${page.totalPage}">末页</a>
            <a th:unless="${page.pageNo lt page.totalPage}" href="javascript:alert('已经是末页')">下一页</a>
            <a th:unless="${page.pageNo lt page.totalPage}" href="javascript:alert('已经是末页')">末页</a>
            <!--显示当前页数以及总页数-->
            <span th:text="|第${page.pageNo}页/共${page.totalPage}页|"></span>
            (共<span th:text="${page.totalCount}"></span>条记录)
        </dev>
    </div>
</div>
</body>
</html>